<template>
  <div class="panel" style="height: 100%;width: 100%">
    <div class="panel-heading">
      <i class="fa fa-sync fa-spin"></i>数据配置
    </div>
    <div class="panel-body" style="height:calc(100% - 37px);padding-right: 2px !important;">
      <el-row :gutter="5" style="width: 100%;height: 100%;">
        <el-col :span="12" style="height: 100%;">
          <div style="margin-bottom: 10px">
            <el-input
                size="mini"
                placeholder="搜索字段"
                prefix-icon="el-icon-search"
                clearable
                v-model="keyword"/>
          </div>
          <div style="height:calc(100% - 37px);">
            <span><i class="el-icon-coin" style="color: rgb(103, 194, 58);"></i><b>维度</b></span>
            <div class="field-card" style="height: 45%;">
              <draggable
                  class="dragArea list-group"
                  :list="dimensionList"
                  :group="{name:'data',pull: 'clone',put: false}"
                  :clone="cloneObj"
                  animation="300"
                  item-key="data1"
                  :move="onMove"
                  @end="onEnd"
              >
                <template #item="{ element }">
                  <el-row style="padding: 2px 5px;" v-show="keyword===''||element.name.indexOf(keyword)>-1">
                    <el-tag class="field-item-left" :type="element.dataType===4?'warning':'success'" size="small"
                            :effect="share.darkMode?'dark':'light'"><span><i
                        :class="element.dataType===4?'el-icon-date':'glyphicon glyphicon-font'"></i>&nbsp;{{
                        element.name
                      }}</span></el-tag>
                  </el-row>
                </template>
              </draggable>
            </div>
            <span><i class="el-icon-coin" style="color:#0A84FF;margin-top: 15px"></i><b>度量</b></span>
            <div class="field-card" style="height: 45%;">
              <draggable
                  class="dragArea list-group"
                  :list="metricList"
                  :group="{name:'data',pull: 'clone',put: false}"
                  :clone="cloneObj"
                  item-key="data2"
                  :move="onMove"
                  @end="onEnd"
              >
                <template #item="{ element }">
                  <el-row style="padding: 2px 5px;" v-show="keyword===''||element.name.indexOf(keyword)>-1">
                    <el-tag class="field-item-left" type="primary" size="small" :effect="share.darkMode?'dark':'light'">
                      <span><i class="el-icon-s-data"></i>&nbsp;{{ element.name }}</span>
                    </el-tag>
                  </el-row>
                </template>
              </draggable>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%">
          <el-row>
            <el-col class="panel_left">
              <el-row style="margin-bottom: 10px">
                <el-tooltip content="交换行和列" placement="bottom">
                  <el-button type="primary" icon="el-icon-sort" size="mini" @click="swapColRow"></el-button>
                </el-tooltip>
                <el-tooltip content="添加计算字段" placement="bottom">
                  <el-button type="success" icon="el-icon-plus" size="mini" @click="editComputedField(false)"
                             style="margin-left: 4px;"></el-button>
                </el-tooltip>
              </el-row>
              <div class="panel mini">
                <div class="panel-heading">
                  <span class="panel-icon"><i class="glyphicon glyphicon-th"></i>列</span>
                </div>
                <div class="panel-body">
                  <draggable
                      ghostClass="ghost"
                      :list="workBook.columns"
                      class="field-item-list"
                      group="data"
                      handle=".mover"
                      item-key="columns"
                  >
                    <template #item="{ element }">
                      <div class="field-item" v-bind:title="tips(element)"
                           v-bind:class="[element.slaveType==0?'dimension':'measure']"
                           v-bind:data-geomarker="element.geoMarker">
                        <span class='adorn' v-if="element.geoMarker"><i
                            class='glyphicon glyphicon-globe'></i>&nbsp;</span>
                        <span class='adorn' v-if="element.sortMode==='asc'"><i
                            class='glyphicon glyphicon-menu-up'></i>&nbsp;</span>
                        <span class='adorn' v-if="element.sortMode==='desc'"><i
                            class='glyphicon glyphicon-menu-down'></i>&nbsp;</span>
                        <span class='adorn' v-if="element.inside"><i
                            class='glyphicon glyphicon-eye-close'></i>&nbsp;</span>
                        <span class="name">{{ element.name }}</span>
                        <el-dropdown trigger="click" size="medium">
                                <span class="el-dropdown-link">
                                  <button class="btn btn-link btn_menu"><i
                                      class="glyphicon glyphicon-menu-hamburger"></i></button>
                                </span>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="renameRow(element)">重命名</el-dropdown-item>
                              <el-dropdown-item @click="sortMode(element)">排序方式</el-dropdown-item>
                              <el-dropdown-item v-if="element.slaveType === 1 && !element.expression"
                                                @click="aggregateMode(element)">聚合模式
                              </el-dropdown-item>
                              <el-dropdown-item v-if="element.slaveType === 1" @click="numberFormat(element)">数值格式
                              </el-dropdown-item>
                              <el-dropdown-item v-if="element.slaveType === 0" @click="editGeoMarker(element)">设为地理维度
                              </el-dropdown-item>
                              <el-dropdown-item v-if="element.dataType ===4" @click="dateSub(element)">日期细分
                              </el-dropdown-item>
                              <el-dropdown-item v-if="element.expression" @click="editComputedField(element)">编辑计算字段
                              </el-dropdown-item>
                              <el-dropdown-item @click="delObj(workBook.columns,element)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </template>
                  </draggable>
                </div>
              </div>
              <div class="panel mini">
                <div class="panel-heading">
                  <span class="panel-icon"><i class="glyphicon glyphicon-th-list"></i>行</span>
                </div>
                <div class="panel-body">
                  <draggable
                      :list="workBook.rows"
                      class="field-item-list"
                      group="data"
                      handle=".mover"
                      item-key="rows">
                    <template #item="{ element }">
                      <div class="field-item" v-bind:title="tips(element)"
                           v-bind:class="[element.slaveType===0?'dimension':'measure']"
                           v-bind:data-geomarker="element.geoMarker">
                        <span class='adorn' v-if="element.geoMarker"><i
                            class='glyphicon glyphicon-globe'></i>&nbsp;</span>
                        <span class='adorn' v-if="element.sortMode==='asc'"><i
                            class='glyphicon glyphicon-menu-up'></i>&nbsp;</span>
                        <span class='adorn' v-if="element.sortMode==='desc'"><i
                            class='glyphicon glyphicon-menu-down'></i>&nbsp;</span>
                        <span class='adorn' v-if="element.inside"><i
                            class='glyphicon glyphicon-eye-close'></i>&nbsp;</span>
                        <span class="name">{{ element.name }}</span>
                        <el-dropdown trigger="click" size="medium">
                                <span class="el-dropdown-link">
                                  <button class="btn btn-link btn_menu"><i
                                      class="glyphicon glyphicon-menu-hamburger"></i></button>
                                </span>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="renameRow(element)">重命名</el-dropdown-item>
                              <el-dropdown-item @click="sortMode(element)">排序方式</el-dropdown-item>
                              <el-dropdown-item v-if="element.slaveType === 1 && !element.expression"
                                                @click="aggregateMode(element)">聚合模式
                              </el-dropdown-item>
                              <el-dropdown-item v-if="element.slaveType === 1" @click="numberFormat(element)">数值格式
                              </el-dropdown-item>
                              <el-dropdown-item v-if="element.slaveType === 0" @click="editGeoMarker(element)">设为地理维度
                              </el-dropdown-item>
                              <el-dropdown-item v-if="element.dataType ===4" @click="dateSub(element)">日期细分
                              </el-dropdown-item>
                              <el-dropdown-item v-if="element.expression" @click="editComputedField(element)">编辑计算字段
                              </el-dropdown-item>
                              <el-dropdown-item @click="delObj(workBook.rows,element)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </template>
                  </draggable>
                </div>
              </div>
              <div class="panel mini">
                <div class="panel-heading">
                  <span class="panel-icon">过滤条件</span>
                </div>
                <div class="panel-body">
                  <draggable
                      :list="workBook.filters"
                      class="field-item-list"
                      group="data"
                      handle=".mover"
                      item-key="filters"
                  >
                    <template #item="{ element }">
                      <div class="field-item"
                           v-bind:class="[element.field.slaveType==0?'dimension':'measure']"
                           v-bind:title="tips(element.field)">
                        <span class="name">{{ element.field.name }}</span>
                        <el-dropdown trigger="click" size="medium">
                                <span class="el-dropdown-link">
                                  <button class="btn btn-link btn_menu"><i
                                      class="glyphicon glyphicon-menu-hamburger"></i></button>
                                </span>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="editFilter(element)">编辑</el-dropdown-item>
                              <el-dropdown-item @click="delObj(workBook.filters,element)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </template>
                  </draggable>
                </div>
              </div>
              <div class="panel mini">
                <div class="panel-heading">
                  <span class="panel-icon">二级维度</span>
                </div>
                <div class="panel-body">
                  <draggable
                      :list="workBook.subDimension"
                      class="field-item-list"
                      group="data"
                      item-key="subDimension">
                    <template #item="{ element }">
                      <div class="field-item"
                           v-bind:class="[element.slaveType==0?'dimension':'measure']" v-bind:title="tips(element)">
                        <span class="name">{{ element.name }}</span>
                        <el-dropdown trigger="click" size="medium">
                                <span class="el-dropdown-link">
                                  <button class="btn btn-link btn_menu"><i
                                      class="glyphicon glyphicon-menu-hamburger"></i></button>
                                </span>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="editFilter(element)">编辑</el-dropdown-item>
                              <el-dropdown-item v-if="element.dataType ===4" @click="dateSub(element)">日期细分
                              </el-dropdown-item>
                              <el-dropdown-item @click="delSubDimension(element)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </template>
                  </draggable>
                </div>
              </div>
              <div class="panel mini">
                <div class="panel-heading">
                  <span class="panel-icon">链接参数</span>
                </div>
                <div class="panel-body">
                  <draggable
                      :list="workBook.urlParams"
                      class="field-item-list"
                      group="data"
                      handle=".mover"
                      item-key="urlParams">
                    <template #item="{ element }">
                      <div class="field-item"
                           v-bind:class="[element.field.slaveType==0?'dimension':'measure']">
                        <span class="name">{{ element.name || element.field.name }}</span>
                        <el-dropdown trigger="click" size="medium">
                                <span class="el-dropdown-link">
                                  <button class="btn btn-link btn_menu"><i
                                      class="glyphicon glyphicon-menu-hamburger"></i></button>
                                </span>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="urlParamsHandle(element)">编辑</el-dropdown-item>
                              <el-dropdown-item @click="delObj(workBook.urlParams,element)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </template>
                  </draggable>
                </div>
              </div>
              <div class="panel mini">
                <div class="panel-heading">
                  <span class="panel-icon">排序选择</span>
                </div>
                <div class="panel-body">
                  <el-form>
                    <el-form-item label="字段:" style="margin-bottom: 5px">
                      <el-input readonly v-model="orderByDesc"></el-input>
                    </el-form-item>
                    <el-form-item label="TOP:" style="margin-bottom: 5px">
                      <el-input-number v-model.number="workBook.limit.take" style="width: 100px"/>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--  日期细分弹窗  -->
    <form-dialog title="日期细分" ref="dateTimeSubDiag" v-slot:default="slotProps">
      <el-form>
        <el-form-item label="细分类型:">
          <el-radio-group v-model="slotProps.data.dateTimeSub">
            <el-radio label="year">年</el-radio>
            <el-radio label="month">月</el-radio>
            <el-radio label="day">日</el-radio>
            <el-radio label="_ym">年月</el-radio>
            <el-radio label="_ymd">年月日</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </form-dialog>

    <!--  排序方式弹窗  -->
    <form-dialog title="排序方式" ref="sortModeDiag" v-slot:default="slotProps">
      <el-form>
        <el-form-item label="排序方式:">
          <el-radio-group v-model="slotProps.data.sortMode">
            <el-radio label="">不排序</el-radio>
            <el-radio label="asc">升序</el-radio>
            <el-radio label="desc">降序</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </form-dialog>

    <!--  地理级别  -->
    <form-dialog title="地理维度" ref="geoMarkerDiag" v-slot:default="slotProps">
      <el-form>
        <el-form-item label="类型:">
          <el-radio-group v-model="slotProps.data.geoMarker" size="small">
            <el-radio-button label="">非地理</el-radio-button>
            <el-radio-button label="Geo-P">省/自治区（中国地图）</el-radio-button>
            <el-radio-button label="Geo-C">城市（中国地图）</el-radio-button>
            <el-radio-button label="Geo-C-c">省市版图</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="slotProps.data.geoMarker == 'Geo-C-c'" label="省份:">
          <el-select v-model="slotProps.data.province" filterable clearable placeholder="请选择省份" value-key="id"
                     @change="slotProps.data.city=''">
            <el-option v-for="item in provinceList" :value="item" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="slotProps.data.geoMarker == 'Geo-C-c'&&obj.province" label="城市:">
          <el-select v-model="slotProps.data.city" filterable clearable placeholder="请选择城市">
            <el-option v-for="item in slotProps.data.province.citys" :value="item.PkId" :label="item.Name"
                       :key="item.PkId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </form-dialog>

    <!--  聚合模式弹窗  -->
    <form-dialog title="聚合模式" ref="aggregateModeDiag" v-slot:default="slotProps">
      <el-form>
        <el-form-item label="统计方式:">
          <el-radio-group v-model="slotProps.data.aggregateMode">
            <el-radio :label="0">不聚合</el-radio>
            <el-radio :label="1">统计</el-radio>
            <el-radio :label="2">最小值</el-radio>
            <el-radio :label="3">最大值</el-radio>
            <el-radio :label="4">总和</el-radio>
            <el-radio :label="5">平均值</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="slotProps.data.aggregateMode===1" label="是否去重">
          <el-checkbox v-model="slotProps.data.distinct">去重</el-checkbox>
        </el-form-item>
      </el-form>
    </form-dialog>

    <!--  数值格式弹窗  -->
    <form-dialog title="数值格式" ref="numberFormatDiag" v-slot:default="slotProps">
      <el-form size="mini" v-model="slotProps.data.numberFormat">
        <el-form-item label="小数位数(E):">
          <el-input-number :max="6" :min="0" v-model="slotProps.data.numberFormat.num_format_e"></el-input-number>
        </el-form-item>
        <el-form-item label="数量单位(S):">
          <el-select v-model="slotProps.data.numberFormat.num_format_s">
            <el-option :value="-1" label="无"></el-option>
            <el-option :value="1" label="万"></el-option>
            <el-option :value="100" label="百万"></el-option>
            <el-option :value="1000" label="千万"></el-option>
            <el-option :value="0.01" label="百分比"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :inline="true" label="前/后缀(P):">
          <el-input v-model="slotProps.data.numberFormat.num_format_p.prefix" style="width: 100px"></el-input>
          /
          <el-input v-model="slotProps.data.numberFormat.num_format_p.subfix" style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="slotProps.data.numberFormat.num_format_i">包括千位分隔符(I)</el-checkbox>
        </el-form-item>
      </el-form>
      <h3>{{ Number(123456789.888888).toMeasureFormart(slotProps.data.numberFormat) }}</h3>
    </form-dialog>

    <!--  外链参数弹窗  -->
    <form-dialog title="外链参数" ref="urlParamDiag" v-slot:default="slotProps">
      <el-form>
        <el-form-item label="字段:">
          <el-input v-model="slotProps.data.field.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="预设:">
          <el-radio-group v-model="slotProps.data.name" style="width: 300px">
            <el-radio label="SSO_OrgNames">组织名称</el-radio>
            <el-radio label="SSO_OrgCodes">组织编码</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="参数:">
          <el-input v-model="slotProps.data.name" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
    </form-dialog>

    <!--  筛选器弹窗  -->
    <filter-config ref="filterConfig"></filter-config>

    <!--  添加计算字段弹窗  -->
    <form-dialog title="计算字段" ref="computedFieldDiag" v-slot:default="slotProps">
      <el-form>
        <el-form-item label="字段名:">
          <el-input v-model="slotProps.data.name" style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="表达式:">
          <el-input type="textarea" v-model="slotProps.data.expression" style="width: 300px" rows="6">
          </el-input>
        </el-form-item>
        <el-form-item label="从属:">
          <el-radio-group v-model="slotProps.data.slaveType" style="width: 300px">
            <el-radio :label="0">维度</el-radio>
            <el-radio :label="1">度量</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预计输出类型:">
          <el-radio-group v-model="slotProps.data.dataType" style="width: 300px">
            <el-radio :label="1">字符</el-radio>
            <el-radio :label="2">数字</el-radio>
            <el-radio :label="4">时间</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="添加到:">
          <el-radio-group v-model="slotProps.data.isRow" style="width: 300px">
            <el-radio :label="true">行</el-radio>
            <el-radio :label="false">列</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </form-dialog>
  </div>

</template>

<script>
import {computed, toRefs} from "vue";
import draggable from "vuedraggable";
import {store} from "@/components/chart/common/store";
import formDialog from "@/components/formDialog";
import filterConfig from "@/views/WorkBook/config/filterConfig";
import {Guid} from "@/utils/guid";

export default {
  name: "ChartDataConfig",
  components: {
    draggable, formDialog, filterConfig
  },
  data() {
    return {
      keyword: '',
      collapseMode: ['1', '2'],//折叠面板展开
      relatedContext: {},
      draggedContext: {},
      share: store
    }
  },
  props: {
    workBook: {
      type: Object,
      default: {}
    },
    dataSource: {
      type: Object,
      default: {}
    }
  },
  setup(props) {

    const {workBook, dataSource} = toRefs(props)

    //维度列表
    const dimensionList = computed(() => {
      if (dataSource.value && dataSource.value.preDataFields) {
        const list = dataSource.value.preDataFields.filter(item => {
          return item.dataType === 1 | item.dataType === 4
        })
        return list.map(item => {
          return {
            ...item,
            slaveType: 0,
            bakName: item.systemName,
            dateTimeSub: item.dataType === 4 ? 'year' : ''
          }
        });
      } else {
        return []
      }
    })

    //度量列表
    const metricList = computed(() => {
      if (dataSource.value && dataSource.value.preDataFields) {
        const list = dataSource.value.preDataFields.filter(item => {
          return item.dataType === 2
        })
        return list.map(item => {
          return {
            ...item,
            slaveType: 1,
            aggregateMode: 4,
            bakName: item.name,
          }
        });
      } else {
        return []
      }
    })

    //排序字段
    const orderByDesc = computed(() => {
      let fields = workBook.value.rows.concat(workBook.value.columns).filter(item => item.sortMode);
      if (fields.length) {
        let desc = fields.map(function (d) {
          return d.name + " " + (!d.sortMode || d.sortMode === "asc" ? "↑升序" : "↓降序");
        }).join("\n");
        return desc;
      } else {
        return "";
      }
    })
    return {
      dimensionList, metricList, orderByDesc
    }
  },
  methods: {
    cloneObj(obj) {
      return Object.assign({}, obj)
    },
    //拖拽事件
    onMove(evt, originalEvent) {
      this.relatedContext = evt.relatedContext
      this.draggedContext = evt.draggedContext
      // 取消自动添加
      return false;
    },
    //拖拽完成事件
    onEnd() {
      const arr = this.relatedContext.list;
      const itemKey = this.relatedContext.component.itemKey;
      const element = Object.assign({}, this.draggedContext.element);
      //添加到行或列
      if (itemKey === 'rows' || itemKey === 'columns') {
        const items = this.workBook.rows.concat(this.workBook.columns).filter(item => {
          return element.systemName === item.systemName
        })
        if (items.length < 1) {
          element.bakName = element.systemName
          element.group = element.dataType != '2'
          this.refreshName(element)
          arr.splice(this.relatedContext.index, 0, element);
          return true
        }
        this.$message.warning("当前添加元素已存在行或列中【" + items[0].systemName + "】")
        return false
      }
      //添加到筛选
      if (itemKey === 'filters') {
        let obj = {}
        obj.field = Object.assign({}, element);
        this.$refs.filterConfig.open(obj, this.dataSource).then(data => {
          this.workBook.filters.push(Object.assign({}, data))
        })
      }
      //添加到外链参数
      if (itemKey === 'urlParams') {
        let obj = {}
        obj.field = Object.assign({}, element);
        this.$refs.urlParamDiag.open(obj).then(data => {
          this.workBook.urlParams.push(data)
        })
      }
      //添加到二级维度
      if (itemKey === 'subDimension') {
        if (element.slaveType == '1') {
          this.$message.warning("只能添加维度字段")
          return;
        }
        this.refreshName(element)
        this.workBook.subDimension.push(Object.assign({}, element));
      }
    },
    //行和列提示信息
    tips(field) {
      let title = (field.slaveType === 0 ? "维度" : "度量") + ":" + field.name;
      if (field.tableName) {
        title += "\n所属表:" + field.tableName;
      }
      if (field.systemName != field.name) {
        title += "\n原名:" + field.systemName;
      }
      if (field.sortMode) {
        title += "\n排序方式:" + (field.sortMode === "asc" ? "升序" : "降序");
      }
      if (field.numberFixed) {
        title += "\n数值精度:小数" + field.numberFixed + "位";
      }
      if (field.inside) {
        title += "\n[里字段]";
      }
      if (field.expression) {
        title += "\n[计算列]";
      }
      if (field.constant) {
        title += "\n[常量]";
      }
      return title;
    },
    //交换行和列
    swapColRow() {
      const columns = JSON.parse(JSON.stringify(this.workBook.columns))
      const rows = JSON.parse(JSON.stringify(this.workBook.rows))
      this.workBook.rows = columns
      this.workBook.columns = rows
    },
    //删除数组中元素
    delObj(arr, obj) {
      arr.splice(arr.indexOf(obj), 1)
    },
    //替换或添加元素
    replaceOrAddArray(arr, obj, key) {
      const index = arr.findIndex(item => {
        return _.get(item, key) == _.get(obj, key)
      })
      if (index === -1) {
        arr.push(obj)
      } else {
        arr[index] = obj
      }
    },
    //重命名
    renameRow(obj) {
      this.$prompt('', '重命名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: obj.bakName
      }).then(({value}) => {
        obj.bakName = value
        this.refreshName(obj)
      })
    },
    //设置日期细分
    dateSub(obj) {
      this.$refs.dateTimeSubDiag.open(obj).then(data => {
        this.refreshName(data);
        Object.assign(obj, data)
      })
    },
    //设置排序方式
    sortMode(obj) {
      this.$refs.sortModeDiag.open(obj).then(data => {
        Object.assign(obj, data)
      })
    },
    //设置统计方式
    aggregateMode(obj) {
      this.$refs.aggregateModeDiag.open(obj).then(data => {
        Object.assign(obj, data)
      })
    },
    //设置数值格式
    numberFormat(field) {
      let obj = Object.assign({}, field)
      if (!obj.numberFormat) {
        obj.numberFormat = {};
        obj.numberFormat.num_format_e = 0;
        obj.numberFormat.num_format_s = -1;
        obj.numberFormat.num_format_p = {prefix: "", subfix: ""};
        obj.numberFormat.num_format_i = true;
      }
      this.$refs.numberFormatDiag.open(obj).then(data => {
        Object.assign(field, data)
      })
    },
    //设置地理纬度
    editGeoMarker(oldObj) {
      let obj = Object.assign({}, oldObj)
      if (!obj.province) {
        obj.province = {}
      }
      if (!this.provinceList || this.provinceList.length == 0) {
        const geoCitySource = require('@/assets' + '/mapData/china-Lng-Lat.json')
        this.provinceList = geoCitySource.Provinces.map(d => ({id: d.PkId, name: d.Name, citys: d.Citys}));
      }
      if (obj.GeoMarkerCode) {
        const arr = _.split(obj.GeoMarkerCode, '|', 2);
        obj.province = this.provinceList.find(d => d.id == arr[0])
        if (arr[1]) {
          obj.city = (Number)(arr[1])
        }
      }

      this.$refs.geoMarkerDiag.open(obj).then(data => {
        Object.assign(oldObj, data)
      })
    },
    //编辑外链参数
    urlParamsHandle(obj) {
      this.$refs.urlParamDiag.open(obj).then(data => {
        Object.assign(obj, data)
      })
    },
    //编辑筛选器
    editFilter(obj) {
      this.$refs.filterConfig.open(obj, this.dataSource).then(data => {
        Object.assign(obj, data);
      })
    },
    //编辑计算字段
    editComputedField(obj) {
      if (!obj) {
        obj = {
          field: {},
          isRow: true,
          slaveType: 1
        }
      }
      this.$refs.computedFieldDiag.open(obj).then(data => {
        Object.assign(obj, data);
        if (!obj.tempid) {
          obj.tempid = Guid.NewGuid().ToString("N");
          obj.bakName = obj.name
          obj.systemName = obj.name
          if (obj.isRow) {
            this.replaceOrAddArray(this.workBook.rows, obj, 'tempid')
          } else {
            this.replaceOrAddArray(this.workBook.columns, obj, 'tempid')
          }
        }
      })
    },
    //删除二级维度
    delSubDimension(element) {
      this.delObj(this.workBook.subDimension, element)
    },
    refreshName(obj) {
      let dateTimeSubName = {
        "year": "年",
        "month": "月",
        "day": "日",
        "_ym": "年月",
        "_ymd": "年月日"
      };
      let aggregateModeType = ['不聚合', '统计', '最小值', '最大值', '总和', '平均值'];
      obj.name = ''
      // obj.bakName = obj.systemName
      if (obj.dateTimeSub) {
        obj.name = dateTimeSubName[obj.dateTimeSub] + "(" + obj.bakName + ")"
      }
      if (obj.aggregateMode && obj.aggregateMode > 0) {
        obj.name = aggregateModeType[obj.aggregateMode] + "(" + obj.bakName + ")"
      }
      if (obj.name) {
        obj.name = obj.name
      } else {
        obj.name = obj.bakName
      }
    }
  }
}
</script>

<style scoped>
.field-item-list {
  width: 100%;
  min-height: 20px;
  max-height: 100px;
  overflow-y: auto;
}

.btn-link:hover, .btn-link:focus {
  color: #23527c;
  text-decoration: underline;
  background-color: transparent;
}

.panel.mini .panel-heading {
  padding: 2px 8px !important;
}

.panel.mini .panel-body {
  padding: 2px 4px !important;
}

.panel-heading.mini {
  padding: 2px 8px !important;
}

.field-item-left {
  width: 100%;
}

.field-item-left:hover {
  color: #1890ff;
  background: #e8f4ff;
  border-color: #a3d3ff;
  cursor: pointer;
}

.field-card {
  overflow-y: auto;
}

.field-item {
  width: 100%;
  display: inline-block;
  position: relative;
  height: 24px;
  color: #fff;
  border-radius: 3px;
  padding: 0 5px 0 10px;
  font-size: 12px;
  line-height: 24px;
}

.field-item.dimension {
  background: rgb(103, 194, 58);
}

.field-item.measure {
  background: #0A84FF;
}

.field-item .name {
  display: block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
  max-width: 120px;
  width: auto;
}

.field-item .btn_menu {
  display: block;
  height: 100%;
  float: right;
}

.field-item >>> .el-dropdown {
  float: right;
  line-height: unset;
}

.field-item button {
  font-size: 12px;
  padding: 0;
  color: #fff;
  margin: 0 0 0 5px;
  line-height: unset;
}

.field-item .btn_menu {
  display: block;
  height: 100%;
  float: right;
  line-height: unset;
}

.field-item .adorn {
  display: block;
  height: 100%;
  float: left;
}
</style>
